﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebForm1.aspx.cs" Inherits="Samples_UpdatePanelExtender_WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanelExtender - Sample 1</title>
    <style type="text/css">
        .up
        {
            padding: 10px;
            border: solid 1px #333333;
            width: 200px;
        }
    </style>

    <script type="text/javascript">
        function beginRequest(sender, args)
        {
            alert('BeginRequest Event... UpdatePanel: ' + sender.get_element().id);
        }
        function initializeRequest(sender, args)
        {
            alert('InitializeRequest Event... UpdatePanel: ' + sender.get_element().id);
        }
        function pageLoading(sender, args)
        {
            alert('PageLoading Event... UpdatePanel: ' + sender.get_element().id);
        }
        function pageLoaded(sender, args)
        {
            alert('PageLoaded Event... UpdatePanel: ' + sender.get_element().id);
        }
        function endRequest(sender, args)
        {
            alert('EndRequest Event... UpdatePanel: ' + sender.get_element().id);
        }
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>UpdatePanelExtender</h2>
        <p>This sample demonstrates the functionality of the UpdatePanelExtender.</p>
        <asp:ScriptManager ID="sm1" runat="server" />
        Argument to send with PostBack:
        <input id="arg" type="text" />
        <p>Upon clicking each button an UpdatePanel postback is initiated from a client-side command.  You will also notice alerts during each event within the UpdatePanel's postback lifecycle.</p>
        <div style="margin-top: 20px;">
            <input type="button" value="Update UpdatePanel 1" onclick="upe1.postback($get('arg').value);" />
            <input type="button" value="Update UpdatePanel 2" onclick="upe2.postback($get('arg').value);" />
        </div>
        <div style="margin-top: 20px;">
<ae:UpdatePanelExtender ID="upe1" TargetControlID="up1" OnCommand="upe_Command" runat="server">
    <ClientEvents>
        <BeginRequest EventHandler="beginRequest" />
        <InitializeRequest EventHandler="initializeRequest" />
        <PageLoading EventHandler="pageLoading" />
        <PageLoaded EventHandler="pageLoaded" />
        <EndRequest EventHandler="endRequest" />
    </ClientEvents>
</ae:UpdatePanelExtender>
            <span>UpdatePanel 1</span>
            <div class="up">
<asp:UpdatePanel ID="up1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:Label ID="dateTime" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
            </div>
            <span>UpdatePanel 2</span>
            <div class="up">
                <ae:UpdatePanelExtender ID="upe2" TargetControlID="up2" OnCommand="upe_Command" runat="server">
                    <ClientEvents>
                        <BeginRequest EventHandler="beginRequest" />
                        <InitializeRequest EventHandler="initializeRequest" />
                        <PageLoading EventHandler="pageLoading" />
                        <PageLoaded EventHandler="pageLoaded" />
                        <EndRequest EventHandler="endRequest" />
                    </ClientEvents>
                </ae:UpdatePanelExtender>
                <asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="dateTime2" runat="server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
